<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <style>
    .a-enter,
    .a-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .a-enter-active,
    .a-leave-active {
      transition: all 0.5s;
    }
    .list-complete-item {
      transition: all 1s;

      margin-right: 10px;
    }
    .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
      opacity: 0;
      transform: translateY(30px);
    }
    .list-complete-enter {
      opacity: 0;
      transform: translateY(-30px);
    }
    .list-complete-leave-active {
      position: absolute;
    }
  </style>
  <body>
    <div id="app">
      <button @click="update">das</button>

      <transition-group name="list-complete" tag="ul" name="a">
        <li v-for="(i,index) in items" :key="i.id" class="list-complete-item">
          {{i.name}}
        </li>
      </transition-group>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          items: [],
          updatearr: [],
        },
        created() {
          this.items = [
            { name: "ddsa" + Math.random(), id: Math.random() },
            { name: "ddsa" + Math.random(), id: Math.random() },
            { name: "ddsa" + Math.random(), id: Math.random() },
            { name: "ddsa" + Math.random(), id: Math.random() },
            { name: "ddsa" + Math.random(), id: Math.random() },
          ];
          setInterval(() => {
            this.update();
          }, 3000);
        },
        methods: {
          handler() {
            this.items.pop();
          },
          update() {
            this.updatearr = this.randomNum();
            if (this.updatearr.length === 0) return;
            let i = 0;
            var timer = setInterval(() => {
              if (i >= this.updatearr.length - 1) {
                clearInterval(timer);
              }
              this.items.pop();
              this.items.unshift(this.updatearr[i]);
              i++;
            }, 1000);
          },
          randomNum() {
            let num = Math.floor(Math.random() * 5);
            let arr = [];
            for (var i = 0; i < num; i++) {
              arr.push({
                name: "wwww" + Math.random(),
                id: Math.random(),
              });
            }
            console.log(arr);
            return arr;
          },
        },
      });
    </script>
  </body>
</html>
